<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<html>
<head>
	<title>新增岗位</title>
	<%@ include file="/include/openstyles.jsp"%>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/validate-methods.js"></script>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/jquery/jquery-form.js"></script>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/input.js"></script>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/lui.jiantingdiv.js"></script>
	<script type="text/javascript" src="${ctx}/assets/uc/js/common.js"></script>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.core-3.5.js" ></script>		<!-- 树插件核心 -->
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.exedit-3.5.js" ></script>
	<script type="text/javascript" src="${ctx}/assets/admin/LingUI/js/ztree/js/jquery.ztree.excheck-3.5.js" ></script>
	<style>
		.help-block{
			margin: 0px!important;
		}
	</style>
</head>
<body>
<div class="row">
	<div class="col-xs-12">
		<div class="space-12"></div>
		<form class="form-horizontal" role="form" id="position_form">
			<div class="tabbable">
				<div class="profile-user-info profile-user-info-striped">
					<div class="profile-info-row">
						<div class="profile-info-name" >岗位编号：</div>
						<div class="profile-info-value">
							<input type="text" id="id" name="id"
								   class="col-xs-10 col-sm-8 " placeholder="只能输入数字"  />
						</div>
					</div>
					<div class="profile-info-row">
						<div class="profile-info-name" >岗位名称：</div>
						<div class="profile-info-value">
							<input type="text" id="name" name="name"
								   class="col-xs-10 col-sm-8" placeholder="不能以下划线开头" />
						</div>
					</div>
					<div class="profile-info-row">
						<div class="profile-info-name" >排序字段：</div>
						<div class="profile-info-value">
							<input type="text" id="order" name="order"
								   class="col-xs-10 col-sm-8" placeholder="数字组成" />
						</div>
					</div>
					<div class="profile-info-row">
						<div class="profile-info-name" >岗位描述：</div>
						<div class="profile-info-value">
							<textarea class="col-xs-10 col-sm-8 " style="resize:none;padding-left:3px !important;"
									  maxlength="200" rows="3" id="description_edit" name="description" placeholder="描述岗位"></textarea>
						</div>
					</div>
					<div class="profile-info-row">
						<div class="profile-info-name" >岗位类型：</div>
						<div class="profile-info-value">
							<select id="type" name="type" onchange="change(this.options[this.options.selectedIndex].value)"
									class="form-control col-xs-10 col-sm-8">
							</select>
						</div>
					</div>
					<%--checkedOrgs--%>
					<div class="profile-info-row" id="orgDiv" style="display: none">
						<div class="profile-info-name" >组织机构：</div>
						<div class="profile-info-value">
							<div class="widget-box widget-color-blue2 col-xs-10 col-sm-8" style="max-height:300px;height:auto!important">
								<div class="widget-header">
									<h4 class="widget-title lighter smaller">部门列表</h4>
								</div>
								<div class="widget-body">
									<div class="widget-main padding-8">
										<div class="zTreeDemoBackground">
											<ul id="treeDemo" class="ztree"></ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="profile-info-row" id="plDiv" style="display:none;">
						<div class="profile-info-name" >岗位级别：</div>
						<div class="profile-info-value">
							<div class="widget-box widget-color-blue2 col-xs-10 col-sm-8"
								 style="max-height:300px;height:auto!important">
								<div class="widget-header">
									<h4 class="widget-title lighter smaller">类别列表</h4>
								</div>
								<div class="widget-body">
									<div class="widget-main padding-8">
										<div class="zTreeDemoBackground">
											<ul id="plTree" class="ztree"></ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>


<script type="text/javascript">

	var form = "position_form";
	var $form = $("#"+form);

	var tree ="treeDemo";//树id
	var $tree=$("#treeDemo");
	var zTree,plTree;

	jQuery(function($) {

		loadPositionTypes();

		var setting = {
			async:{
				autoParam: ["id=id"],
				enable:true,
				type:"GET",
				url:"${ctx}/${frameworkPath}/position/org"
			},
			check: {
				enable: true,
				chkStyle:'checkbox'
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onAsyncSuccess: zTreeOnAsyncSuccess
			}
		};

		var plTreeSetting = {
			async:{
				autoParam: ["id=id"],
				enable:true,
				type:"GET",
				url:"${ctx}/${frameworkPath}/positionlevel/get"
			},
			check: {
				enable: true,
				chkStyle:'checkbox'
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onAsyncSuccess: plTreeOnAsyncSuccess
			}
		};

		zTree=$.fn.zTree.init($tree, setting); //树初始化

		plTree= $.fn.zTree.init($('#plTree'),plTreeSetting);

		//名称验证
		jQuery.validator.addMethod("isValidateName", function (value, element) {
			debugger;
			var zipcode = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]{1}[A-Za-z0-9\u4e00-\u9fa5_]{0,19}$");
			return this.optional(element) || zipcode.test(value);
		}, "输入一个有效的岗位名称，不能以下划线开头，长度最多20位！");

		$form.validate({
			rules: {
				'name': {
					required: true,
					isValidateName:true
				},
				'order': {
					required: true,
					digits:true
				},
				'id': {
					required: true,
					digits:true
				}
			},

			messages: {
				'name':{
					required: "名称不能为空"
				},
				'order': {
					required: "排序字段不能为空"
				},
				'id': {
					required: "编号不能为空"
				}
			}
		});

	});

	function loadPositionTypes(){
		//加载功能
		$.ajax({
			type:'GET',
			url:'${ctx}/${frameworkPath}/item/POSITION_TYPE/sub',
			dataType:'json',
			success:function(data){
				var dataObj = eval("("+data+")");
				var tempAjax="";
				$.each(dataObj,function(idx,item){
					tempAjax += "<option value='"+item.value+"'>"+item.name+"</option>";
				})
				$("#type").empty();
				$("#type").append(tempAjax);
			},
			error: function(XmlHttpRequest, textStatus, errorThrown){
				alert('error');
			}
		});
	}

	function formValid(){
		var retObj =new Object();
		var valid = $("#position_form").valid();
		if (valid) {
			var orgs=zTree.getCheckedNodes(true);
			var checkedOrgs = new Array();
			$.each(orgs, function(i,val){
				checkedOrgs.push(val.id);
			});

			var pls=plTree.getCheckedNodes(true);
			var positionLevels = new Array();
			$.each(pls, function(i,val){
				positionLevels.push(val.id);
			});

			$form.ajaxSubmit({
				url : "${ctx}/${frameworkPath}/position/create",
				type : "post",
				async :false,
				traditional:true,
				dataType:'json',
				data:{checkedOrgs:checkedOrgs,positionLevels:positionLevels},
				success : function(message) {
					if (message.success) {
						retObj.text ="保存成功！";
						retObj.state = true;
					} else {
						retObj.text = text;
						retObj.state =false;
					}
				}
			});
		} else {
			return;
		}
		return retObj;
	}

	var zTreeOnAsyncSuccess=function(){
		asyncNodes(zTree.getNodes(),zTree);
		zTree.expandAll(true);
	}

	var plTreeOnAsyncSuccess=function(){
		asyncNodes(plTree.getNodes(),plTree);
		plTree.expandAll(true);
	}

	function asyncNodes(nodes,tree) {
		if (!nodes) return;
		for (var i=0, l=nodes.length; i<l; i++) {
			if (nodes[i].isParent && nodes[i].zAsync) {
				asyncNodes(nodes[i].children,tree);
			}
			else {
				tree.reAsyncChildNodes(nodes[i], "refresh", true);
			}
		}
	}

	//岗位类型变化函数
	function change(val){
		if(val==1){
			$('#orgDiv').show();
			$('#plDiv').hide();
		}
		else if(val==2){
			$('#orgDiv').hide();
			$('#plDiv').show();
		}
		else if(val==0){
			$('#orgDiv').hide();
			$('#plDiv').hide();
		}
	}
</script>
</body>
</html>